<template>
    <div>
      <div class="qi" v-if="user.islogin"> 
      <div v-for="(item, index) in cartlist" :key="index" class="cartevery">
        <img :src="'https://cdn.bestseller.com.cn'+item.miniprogramUrl" alt="qi" v-if="item.miniprogramUrl">
        <img :src="'https://cdn.bestseller.com.cn'+item.picurls[3]" alt="qi" v-else style="img{width:41.5%}">
        <div class="left">
          <p>{{item.classifyName}}</p>
          <p>单价为:{{item.sortBy}}元</p>
          <p>数量<span class="button" v-on:click="jian(item.classifyId)">-</span><span>{{item.count}}</span><span class="button" v-on:click="jia(item.classifyId)">+</span></p>
          <p>单类总价为:{{item.sortBy*item.count}}元</p>
          <p class="remove" v-on:click="remove(item.classifyId)">移除此商品</p>
          <router-link :to="{name:'detail',params:{item}}" tag="p" class="detail">查看详情</router-link>
        </div>
      </div>
      </div>    
      <div class="zong" v-if="zong>0"><p>总价为{{zong}}元   去结算</p></div>
      <div class="zong" v-else v-on:click="$router.push('/mall')">
        nothing in cart    去逛逛
        </div>
      <div v-on:click="$router.push('/mine')" v-if="!user.islogin" style="text-align:center;height:50px;line-height:50px">还没有登录 去登陆</div>
      <div class="bottom">
        <h1>你可能还喜欢</h1>
      <div class="like">
        <router-link :to="{name:'detail',params:{item}}" tag="div" v-for="(item, index) in leftlist" :key="index">
          <img :src="'https://cdn.bestseller.com.cn'+item.miniprogramUrl" alt="qi">
          <p>{{item.classifyName}}</p>
          </router-link>
      </div>
      </div>
    </div>
</template>

<script>
import {response} from '../ajaxservice'
import {mapState,mapMutations,mapGetters} from 'vuex'
export default {
  name: 'Cart',
  created(){
  },
  data(){
    return{
      leftlist:[],
      imgurlurl:''
    }
  },
  methods:{
  ...mapMutations(['jian','jia','remove'])
  },
  mounted(){
  response.get()
  .then(res=>{
    const random=Math.random()*22
    this.leftlist=res[random.toFixed(0)].list
  })
  },
  computed:{
    ...mapState(['cartlist','amount','user']),
    zong(){
      return  this.cartlist.reduce((result,item)=>{
        result=result+item.sortBy*item.count
        return result
      },0)     
    }
  }
}
</script>

<style lang='scss' scoped> 
.cartevery{
  .nothing{height: 50px;}
  height: 250px;
  border-bottom: 1px solid black;
  .detail{margin-top: -10%;margin-left: -200%}
  img{width: 50%;float: left;} 
  .left{width: 50%;float: left; p{line-height: 50px;text-align: center}
  .remove{border:1px solid #b0b0b0;line-height: 20px;width: 60%;margin-left: 20%}}
  .button{border:1px solid black;padding:0 5px;margin:0 10px}
}
.zong{line-height: 100px;text-align: center;height: 100px;overflow: hidden;;p{width: 60%;margin-left: 20%;background: #424242;color: white;margin-top: 25px;text-align: center;height: 50px;line-height: 50px;}border-bottom: 1px solid black}
.like{display:flex;flex-wrap:wrap;div{width: 49%;border: 1px solid black;img{width: 100%}}}
</style>
